﻿/* 
| - - Motion.Euzo.Ca - - - Motion and M+ from euzo.ca - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
*/

/*
The splitter is a horizontal or vertical line between two html elements, when dragged to one direction; it shrinks the element in 
that direction and expands the element in the other direction.

The splitter resizes the elements using their style height and width values, if for any reason these values are locked, the 
splitter will not work.

This file contains the splitter functionality only, once the file is loaded, it searches for all splitter tags and adds the 
necessary event handlers and script functions.
*/

// Create the motion namespace if no one else has created it yet.
if (!Motion)
{
    var Motion = {};
}

(function ()
{
    // Create the framework namespace if it was not created yet.
    if (!Motion.Framework)
    {
        Motion.Framework = {};
    }
})();


(function ()
{
    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
    Motion.Framework.Splitter = {};
    var Splitter = Motion.Framework.Splitter // Shortcut to the splitter namespace.


    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
    // Once the document is loaded, look for all splitters and assigns them with the required functions, the splitters are html 
    // tags that are styled by CSS and functioning by Script.
    Motion.Framework.Splitter.OnLoad = function ()
    {
        window.removeEventListener('load', Splitter.OnLoad, false);

        var SplitterTags = document.all.tags("splitter");
        if (SplitterTags != null)
        {        
            for (SpliterIndex = 0; SpliterIndex < SplitterTags.length; SpliterIndex++)
            {
                var SplitterTag = SplitterTags[SpliterIndex];
                SplitterTag.MoveDirection = SplitterTag.getAttribute('direction');
                if (SplitterTag.MoveDirection)
                {
                    SplitterTag.MoveDirection = SplitterTag.MoveDirection.toLowerCase()
                    SplitterTag.addEventListener('mousedown', Splitter.OnMouseDown, false)
                }
            }
        }
    }


    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
    // Start the splitter functionality when the mouse is down.
    Motion.Framework.Splitter.OnMouseDown = function (MouseEvent)
    {
        // Prevent the default mouse event in order to avoid any unnecessary functionality while resizing.
        MouseEvent.preventDefault()

        // If for any unknown reason the code thinks the mouse is still down, perform a mouse up operation.
        if (Splitter.ActiveSplitterTag)
        {
            Splitter.EndResize();
            return
        }

        Splitter.ActiveSplitterTag = this;
        document.addEventListener('mouseup', Splitter.EndResize, false);
        document.addEventListener('keydown', Splitter.EndResize, false);                

         // Temporarily update the mouse cursors on the next and previous sibling tags and preserve the original values.
        this.previousElementSibling.Original_cursor = this.previousElementSibling.style.cursor
        this.nextElementSibling.Original_cursor = this.nextElementSibling.style.cursor

        if (this.MoveDirection == 'vertical')
        {                       
            this.previousElementSibling.style.cursor = 'n-resize'
            this.nextElementSibling.style.cursor = 'n-resize'
        }
        else if (this.MoveDirection == 'horizontal')
        {
            this.previousElementSibling.style.cursor = 'e-resize'
            this.nextElementSibling.style.cursor = 'e-resize'
        }

        // Start monitoring the mouse movement events.
        document.addEventListener('mousemove', Splitter.OnMouseMove, false);
    }


    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
    // Resize the DIV panels and move the splitter.
    Motion.Framework.Splitter.OnMouseMove = function (MouseEvent)
    {
        // Prevent the default mouse event in order to avoid any unnecessary functionality while resizing.
        MouseEvent.preventDefault()
        
        var SplitterTag = Splitter.ActiveSplitterTag
        var PreviousSibling = SplitterTag.previousElementSibling
        var NextSibling = SplitterTag.nextElementSibling

        if (SplitterTag.MoveDirection == 'vertical')
        {        
            var PreviousSiblingPageTop = document.FindElementLocationTop(PreviousSibling);          
            var AdjustedMouseY = MouseEvent.pageY - (SplitterTag.clientHeight / 2)

            var NewHeightForPreviousSibling = AdjustedMouseY - PreviousSiblingPageTop;
            if(NewHeightForPreviousSibling < 0)
            {
                NewHeightForPreviousSibling = 0
            }            

            // If the splitter is moving up.
            if(NewHeightForPreviousSibling < PreviousSibling.clientHeight)
            {  
                var PreviousSiblingLastHeight = PreviousSibling.clientHeight;
                PreviousSibling.style.height = NewHeightForPreviousSibling + 'px'                    
                if(PreviousSibling.clientHeight != PreviousSiblingLastHeight)
                {                     
                     NextSibling.style.height = (NextSibling.clientHeight - (PreviousSibling.clientHeight - PreviousSiblingLastHeight)) + 'px'   
                }
            }
            // If the splitter is moving down.
            else if(NewHeightForPreviousSibling > PreviousSibling.clientHeight)
            {                
                var NewHeightForNextSibling = NextSibling.clientHeight + (PreviousSibling.clientHeight - NewHeightForPreviousSibling)
                if(NewHeightForNextSibling < 0)
                {
                    NewHeightForNextSibling = 0
                }            

                var NextSiblingLastHeight = NextSibling.clientHeight;
                NextSibling.style.height = NewHeightForNextSibling + 'px' 
                if(NextSibling.clientHeight != NextSiblingLastHeight)
                {
                    PreviousSibling.style.height = (PreviousSibling.clientHeight - (NextSibling.clientHeight - NextSiblingLastHeight)) + 'px'                                 
                }                
            }                           
        }
        else if (SplitterTag.MoveDirection == 'horizontal')
        {
            var PreviousSiblingPageLeft = document.FindElementLocationLeft(PreviousSibling);          
            var AdjustedMouseX = MouseEvent.pageX - (SplitterTag.clientWidth / 2)

            var NewWidthForPreviousSibling = AdjustedMouseX - PreviousSiblingPageLeft;
            if(NewWidthForPreviousSibling < 0)
            {
                NewWidthForPreviousSibling = 0
            }            

            // If the splitter is moving up.
            if(NewWidthForPreviousSibling < PreviousSibling.clientWidth)
            {  
                var PreviousSiblingLastWidth = PreviousSibling.clientWidth;
                PreviousSibling.style.width = NewWidthForPreviousSibling + 'px'                    
                if(PreviousSibling.clientWidth != PreviousSiblingLastWidth)
                {                     
                     NextSibling.style.width = (NextSibling.clientWidth - (PreviousSibling.clientWidth - PreviousSiblingLastWidth)) + 'px'   
                }
            }
            // If the splitter is moving down.
            else if(NewWidthForPreviousSibling > PreviousSibling.clientWidth)
            {                
                var NewWidthForNextSibling = NextSibling.clientWidth + (PreviousSibling.clientWidth - NewWidthForPreviousSibling)
                if(NewWidthForNextSibling < 0)
                {
                    NewWidthForNextSibling = 0
                }            

                var NextSiblingLastWidth = NextSibling.clientWidth;
                NextSibling.style.width = NewWidthForNextSibling + 'px' 
                if(NextSibling.clientWidth != NextSiblingLastWidth)
                {
                    PreviousSibling.style.width = (PreviousSibling.clientWidth - (NextSibling.clientWidth - NextSiblingLastWidth)) + 'px'                                 
                }                
            }                           
        }        
    }


    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
    // Stop the splitter functionality when the mouse is up (on any place on the document not inside the split panel only).
    Motion.Framework.Splitter.EndResize = function (Event)
    {
        if(Event)
        {
            if(Event.type == 'mouseup')
            {
                // Prevent the default mouse event in order to avoid any unnecessary functionality while resizing.
                Event.preventDefault()
            }
            else if(Event.type == 'keydown')
            {
                if(Event.keyCode != 27)
                {
                    return
                }
            }
        }

        if (Splitter.ActiveSplitterTag)
        {            
            document.removeEventListener('mousemove', Splitter.OnMouseMove, false);
            document.removeEventListener('mouseup', Splitter.EndResize, false);
            document.removeEventListener('keydown', Splitter.EndResize, false);

            // Restore the previous mouse pointers       
            var SplitterTag = Splitter.ActiveSplitterTag
            SplitterTag.previousElementSibling.style.cursor = SplitterTag.previousElementSibling.Original_cursor
            SplitterTag.previousElementSibling.Original_cursor = null;
            SplitterTag.nextElementSibling.style.cursor = SplitterTag.nextElementSibling.Original_cursor
            SplitterTag.nextElementSibling.Original_cursor = null;
            Splitter.ActiveSplitterTag = null;         
        }
    }


})();



// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *    
// Wait until the entire page is loaded with all external scripts and files, then initialize the page.
window.addEventListener('load', Motion.Framework.Splitter.OnLoad, false);
